<template>
  <div class="navbar">
    <div class="left-menu">
      <div class="hamburger-container" @click="toggleSidebar">
        <i :class="['el-icon-s-unfold', isCollapse ? 'is-active' : '']"></i>
      </div>
      <Breadcrumb />
    </div>
    
    <div class="right-menu">
      <el-dropdown trigger="click" class="avatar-container">
        <div class="avatar-wrapper">
          <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" class="user-avatar">
          <i class="el-icon-caret-bottom"></i>
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <el-dropdown-item>
            <span style="display: block">管理员</span>
          </el-dropdown-item>
          <el-dropdown-item divided>
            <span style="display: block">个人设置</span>
          </el-dropdown-item>
          <el-dropdown-item divided>
            <span style="display: block">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import Breadcrumb from './Breadcrumb.vue'
import { EventBus, EventNames } from '@/utils/eventBus'

export default {
  name: 'Navbar',
  components: {
    Breadcrumb
  },
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    /**
     * 切换侧边栏折叠状态
     */
    toggleSidebar() {
      // 通过事件总线通知其他组件侧边栏状态变化
      EventBus.$emit(EventNames.TOGGLE_SIDEBAR)
    }
  }
}
</script>

<style scoped>
.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-menu {
  display: flex;
  align-items: center;
}

.hamburger-container {
  line-height: 46px;
  height: 100%;
  float: left;
  cursor: pointer;
  transition: background 0.3s;
  padding: 0 15px;
}

.hamburger-container:hover {
  background: rgba(0, 0, 0, 0.025);
}

.hamburger-container i {
  font-size: 20px;
}

.hamburger-container i.is-active {
  transform: rotate(180deg);
}

.right-menu {
  float: right;
  height: 100%;
  display: flex;
  align-items: center;
  padding-right: 15px;
}

.avatar-container {
  cursor: pointer;
}

.avatar-wrapper {
  margin-top: 5px;
  position: relative;
  display: flex;
  align-items: center;
}

.user-avatar {
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}

.user-dropdown {
  top: 50px !important;
}
</style>